<template>
    <div>
        <myhead title="书影音">
            <template #right>
                 <img class="rightImg" src="../../assets/images/ic_chat_green.png" alt="">
            </template>
            <template #left>
                 <img class="leftImg" src="../../assets/images/ic_actionbar_search_icon.png" alt="">
            </template>
        </myhead>
        <nav class="nava">
            <span :class="{active:currIndex==0}" @click="currIndex=0"><router-link to="/audio/film" class="fi">电影</router-link></span>
            <span :class="{active:currIndex==1}" @click="currIndex=1"><router-link to="/audio/read" class="fi">读书</router-link></span>
            <span :class="{active:currIndex==2}" @click="currIndex=2"><router-link to="/audio/tv" class="fi">电视</router-link></span>
            <span :class="{active:currIndex==3}" @click="currIndex=3"><router-link to="/audio/city" class="fi">同城</router-link></span>
            <span :class="{active:currIndex==4}" @click="currIndex=4"><router-link to="/audio/music" class="fi">音乐</router-link></span>
        </nav>
        <router-view></router-view>
    </div>
</template>

<script>
import myhead from '../../components/Header/head'
export default {
    data(){
        return{
            currIndex:1
        }
    },
    components:{myhead}
}
</script>

<style scoped>
    .active{
        background-color: #07d614;
    }
    .nava{
        display: flex;
        width: 100%;
        height: 0.8rem;
        border-bottom: 1px solid #ccc;
    }
    .nava span{
        width: 20%;
        text-align: center;
        line-height: 0.8rem;
        color: #ccc;
    }
    .nava span .fi{
        color: rgb(128, 127, 127);
    }
    .nava span .fi:hover{
        color:#fff;
    }
</style>